<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      /*左上元素的样式*/
      #t_l_div {
        width: 611px;
        height: 376px;
        background-color: #e8e8e8;
        float: left;
      }
      /*设置最外层的大的div 居中*/
      body > div {
        width: 1000px;
        margin: 0 auto; /*居中*/
      }
      /*设置右上div的样式*/
      #t_r_div {
        float: right;
        width: 375px;
        height: 376px;
        background-color: #e8e8e8;
      }
      /*设置表示两行的div*/
      body > div > div {
        /*避免出现浮动完之后 高度识别为0 的问题，
      因为表示行的div里面的所有div都浮动了*/
        overflow: hidden;

        margin-bottom: 10px;
      }
      /*设置左下div的样式*/
      #b_l_div {
        width: 366px;
        height: 233px;
        background-color: #e8e8e8;
        float: left;
      }
      /*设置右下div的样式,装着3个小的的div*/
      #b_r_div {
        float: right;
      }

      /*设置三个小的div的样式*/
      #b_r_div > div {
        width: 198px;
        height: 233px;
        background-color: #e8e8e8;
        float: left;
        margin-left: 10px; /*设置间距*/
      }
    </style>
  </head>
  <body>
    <div>
      <div id="t_div">
        <div id="t_l_div"></div>
        <div id="t_r_div"></div>
      </div>
      <div id="b_div">
        <div id="b_l_div"></div>
        <div id="b_r_div">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
    </div>
  </body>
</html>
